<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-23 09:21:57
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-08-30 13:57:54
-->
<template>
  <el-transfer
    class="identityResourceTransfer"
    :data="props.data"
    :titles="['已拥有', '未拥有:']"
    v-model="claimTypeList"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import { onMounted, PropType, ref, watch } from 'vue'

interface IOption {
  key: string
  label: string
  disabled: boolean
}
const props = defineProps({
  data: {
    type: Array as PropType<IOption[]>,
    required: true,
  },
  activate: {
    type: Array as PropType<string[]>,
    required: true,
  },
})

interface EmitsType {
  (e: 'update:activate', value: string[]): void
}
const emit = defineEmits<EmitsType>()

const claimTypeList = ref<string[]>([])

const init = () => {
  claimTypeList.value = props.data
    .filter((item) => !props.activate.includes(item.key))
    .map((item) => item.key)
}
watch(
  () => props.activate,
  () => {
    claimTypeList.value = props.data
      .filter((item) => !props.activate.includes(item.key))
      .map((item) => item.key)
  },
)

const handleChange = () => {
  const activateValues = props.data
    .filter((item) => {
      return !claimTypeList.value.includes(item.key)
    })
    .map((item) => {
      return item.key
    })
  emit('update:activate', activateValues)
}
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.identityResourceTransfer {
  display: flex;
  justify-content: space-between;
}
</style>
